<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style6.css">
</head>
<body>
	<div id="background" onclick="demo()">
		<div id="hour"></div>
		<div id="minute"></div>
		<div id="secoud"></div>
		<div id="round"></div>
	</div>
</body>
	<script type="text/javascript">

		var secoud = document.getElementById('secoud');
		var minute = document.getElementById('minute');
		var hour = document.getElementById('hour');

		var setDate = new Date();

		// 获取一次秒数
		var temp_secoud = setDate.getSeconds();

		// 计算一秒需要的度数
		var secoud_deg = 360 / 60 * temp_secoud;

		// 每秒获取一次
		setInterval(function(){
			setDate = new Date();
			temp_secoud = setDate.getSeconds();
		},1000)

		setInterval(function(){
			var now_secoud = setDate.getSeconds();
			var now_minute = setDate.getMinutes();
			var now_hour = setDate.getHours();

			// 秒针一毫米走的度数
			var millimeter_deg = 360 / 60 / 1000;

			if (temp_secoud == now_secoud) {
				// 秒针十毫米走的度数
				secoud_deg = secoud_deg + millimeter_deg * 10;
			}

			var minute_deg = 360 / 60 * now_minute + 360 / 60 / 60 * now_secoud;

			var hour_deg = 360 / 12 * now_hour + 360 / 12 * now_minute / 60;

			secoud.style.transform = 'rotate('+secoud_deg+'deg)';
			minute.style.transform = 'rotate('+minute_deg+'deg)';
			hour.style.transform = 'rotate('+hour_deg+'deg)';
		},10);

		// 十毫秒后加载
		setTimeout(function(){
			secoud.style.display = 'block';
			minute.style.display = 'block';
			hour.style.display = 'block';
		},10);

	</script>
</html>